<!--
 * @Descripttion: 
 * @version: 
 * @Author: hejin.gao
 * @Date: 2022-09-20 17:24:27
 * @LastEditors: hejin.gao
 * @LastEditTime: 2022-09-21 09:16:56
-->
<template>
  <div class="tool">
    <el-tooltip class="item" effect="dark" content="开始" placement="top">
      <div class="item" @click="flyPath.startFly()" >
        <i class="el-icon-video-play"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="暂停" placement="top">
      <div class="item" @click="flyPath.pauseFly()" >
        <i class="el-icon-video-pause"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="向后" placement="top">
      <div class="item" @click="flyPath.flyBack()" >
        <i class="el-icon-arrow-left"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="向前" placement="top">
      <div class="item" @click="flyPath.flyForward()" >
        <i class="el-icon-arrow-right"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="顶视" placement="top">
      <div class="item" @click="flyPath.topView()" >
        <i class="el-icon-bangzhu"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="跟随" placement="top">
      <div class="item" @click="flyPath.aircraftView()" >
        <i class="el-icon-view"></i>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    this.flyPath = null;
    return {};
  },
  computed: {
    ...mapState("layer", ["objectIds"]),
  },
  mounted() {
    let object = earth.objectsManager.objectList.find(
      (ele) => ele.type == "flyPath" && this.objectIds.includes(ele.id)
    );
    this.flyPath = object?.value;
  },
  methods: {},
};
</script>